<template>
	<view class="">
		<!-- <NavBar title="发起集采接龙"></NavBar> -->
		<view class="InitiateSolitaire">
			<view class="initiateSolitaire tn-padding tn-margin-bottom-sm tn-margin-top-sm">
				<view class="tn-flex tn-flex-col-center tn-margin-bottom-sm tn-margin-top-sm">
					<text class="text-label">集采标题:</text>
					<input class="tn-flex-1" v-model="form.title" type="text" maxlength="16"
						placeholder="社区名称+集采商品+集采接龙服务">
				</view>
				<view class="tn-flex tn-flex-col-center tn-margin-bottom-sm tn-margin-top-sm">
					<text class="text-label">收获地址:</text>
					<input class="tn-flex-1" type="text" disabled v-model="form.addressName" @click="getAddress">
					<text class="tn-icon-location-fill" @click="getAddress"
						style="width: 80rpx;font-size: 40rpx;"></text>
				</view>
				<view class="tn-flex tn-flex-col-center tn-margin-bottom-sm tn-margin-top-sm">
					<text class="text-label">报名截止:</text>
					<input @click="calendarShow = true" disabled v-model="form.date" class="tn-flex-1"
						placeholder="请选择截止日期" />
				</view>
				<view class="tn-flex tn-flex-col-center tn-flex-row-between tn-margin-bottom-sm tn-margin-top-sm">
					<view class="tn-flex-1 tn-flex tn-flex-col-center tn-margin-right-xs">
						<text class="text-label">我的名字:</text>
						<input class="tn-flex-1" type="text" v-model="form.myName">
					</view>
					<view class="tn-flex-1 tn-flex tn-flex-col-center">
						<text class="text-label">联系方式:</text>
						<input class="tn-flex-1" type="number" maxlength="11" v-model="form.tel">
					</view>
				</view>
				<view
					class="tn-flex tn-flex-col-center tn-flex-row-between tn-margin-bottom-sm tn-margin-top-sm tn-padding-bottom-xs"
					style="border-bottom:1px solid #afafaf;">
					<text class="tn-flex-1">我的需求</text>
					<view class="tn-flex-1 tn-flex tn-flex-col-center">
						<text class="text-label">类别:</text>
						<input class="tn-flex-1" disabled v-model="form.category" type="text"
							@click="categorySelectShow=true">
						<text class="tn-icon-down-triangle" style="width: 40rpx;font-size: 40rpx;"></text>
					</view>
				</view>
				<view class="">
					<view class="tn-margin-bottom-sm" style="border-bottom: 1px solid #afafaf;"
						v-for="v,i in demandData">
						<view class="tn-flex tn-flex-col-center tn-margin-bottom-sm">
							<text style="width: 40rpx;">{{i+1}}</text>
							<text class="text-label">商品名称:</text>
							<input type="text" class="tn-flex-1" v-model="v.name" disabled
								@click="openNameSelectShow(i)">
							<text class="tn-icon-down-triangle" style="width: 40rpx;font-size: 40rpx;"></text>
						</view>
						<view
							class="tn-flex tn-flex-col-center tn-flex-row-between tn-margin-bottom-sm tn-padding-left-lg">
							<view class="tn-flex-1 tn-flex tn-flex-col-center">
								<text class="text-label">我的需求:</text>
								<input type="number" v-model="v.num" class="tn-flex-5 tn-margin-right-xs"
									placeholder="数量">
								<input type="text" v-model="v.unit" maxlength="3" class="tn-flex-4" placeholder="单位">
							</view>
							<view class="tn-flex-1 tn-flex tn-flex-col-center">
								<text class="text-label tn-text-right">预算：</text>
								<input type="number" v-model="v.budget" class="tn-flex-1 tn-margin-right-xs">
								<text style="width: 40rpx;">元</text>
							</view>
						</view>
						<view
							class="tn-flex tn-flex-col-center tn-flex-row-between tn-margin-bottom-sm tn-padding-left-lg">
							<text class="text-label">需求备注:</text>
							<input type="text" v-model="v.remark" class="tn-flex-1">
						</view>
					</view>
					<view class="tn-flex tn-flex-row-right tn-margin-top-sm">
						<tn-button shape="icon" width="100rpx" height="100rpx" backgroundColor="#eaeaea"
							fontColor="#5a5a5a" fontSize="50" :plain="true" :border="true" @click="demandDataAdd">
							<text class="tn-icon-add"></text>
						</tn-button>
					</view>
				</view>
				<!-- <tn-calendar v-model="calendarShow" @change="calendarFun" mode="date"></tn-calendar> -->
				<tn-picker mode="time" v-model="calendarShow" @confirm="calendarFun"></tn-picker>
				<tn-select v-model="categorySelectShow" mode="single" :list="categorySelectList"
					@confirm="categorySelectFun"></tn-select>
				<tn-select v-model="nameSelectShow" mode="single" :list="nameSelectList" @confirm="nameSelectFun">
				</tn-select>
			</view>
			<text class="tn-text-bold tn-margin-left tn-text-xl">团长组长礼金</text>
			<view
				class="initiateSolitaire tn-margin-top-xs tn-padding-top-xs tn-padding-bottom-xs tn-padding-left tn-padding-right">
				<text class="tn-text-sm">
					团长负责组织收集需求数量，负责招标对接，为参与争取更大的优惠，参与报名5名以下集采信息不显示在商家页面，报名人数达到15人以上才会产生组织佣金信息，并对接三家以上商家确认获得对应组织佣金。
				</text>
				<view class="demandTable tn-margin-top-xs tn-padding-xs">
					<view class="tn-flex tn-flex-row-around tn-padding-bottom-xs">
						<text class="tn-flex-1 tn-text-center">等级</text>
						<text class="tn-flex-1 tn-text-center">参与数(人)</text>
						<text class="tn-flex-1 tn-text-center">组织礼金</text>
					</view>
					<view class="">
						<view v-for="v in jicaiTzyjData" :key="v.id"
							class="tn-flex tn-flex-row-around tn-margin-bottom-xs tn-margin-top-xs">
							<text class="tn-flex-1 tn-text-center">{{v.dengji}}级</text>
							<text class="tn-flex-1 tn-text-center">{{v.canyushu1+'-'+v.canyushu2}}</text>
							<text class="tn-flex-1 tn-text-center">{{v.yongjin}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="tn-flex tn-flex-row-center tn-flex-col-center" style="height: 140rpx;">
				<tn-button open-type="share" shape="round" backgroundColor="#ff1313" fontSize="32" width="350rpx"
					height="80rpx" fontColor="tn-color-white" class="btn">
					<text>发布集采</text>
					<text class="tn-icon-send-fill tn-text-xxl"></text>
				</tn-button>
			</view>
		</view>
		<PopUps></PopUps>
		<tn-toast ref="toast"></tn-toast>
	</view>
</template>

<script>
	// import NavBar from '../../components/NavBar/NavBar.vue'
	import PopUps from '../../components/PopUps/PopUps.vue';
	import {
		jicaiTypeApi
	} from '../../apis/indexApi.js'
	import {
		jicaiTzyjApi,
		addJicaiApi
	} from '../../apis/InitiateSolitaireApi.js';
	import {
		useTestTel
	} from '../../utlis/hook.js'
	export default {
		components: {
			// NavBar,
			PopUps
		},
		data() {
			return {
				calendarShow: false,
				categorySelectShow: false,
				nameSelectShow: false,
				latitude: '',
				longitude: '',
				form: {
					title: '',
					addressName: '',
					date: '',
					category: '',
					categoryId: 0,
					myName: '',
					tel: ''
				},
				demandData: [{
					name: '',
					nameId: '',
					num: '',
					unit: '',
					budget: '',
					remark: ''
				}],
				demandDataIndex: 0,
				categorySelectList: [{
					value: '1',
					label: 'A'
				}],
				selectData: [],
				nameSelectList: [],
				jicaiTzyjData: []
			};
		},
		onShareAppMessage(res) {
			let that = this;
			if (res.from === 'button') {
				return new Promise((resolve, reject) => {
					uni.showLoading({
						title: '正在请求分享数据...',
						icon: 'none'
					})
					that.toCollectinformation((v) => { // 模拟异步请求的动作，1秒之后返回数据
						uni.hideLoading();
						resolve({
							title: that.form.title,
							path: `/pages/participate/participate?id=${v}`
						})
					});
				})
			}
		},
		methods: {
			toCollectinformation(fun) {
				let _pro = [];
				this.demandData.forEach((v, i) => {
					_pro.push({
						pro_id: v.nameId,
						pro_number: v.num,
						pro_danwei: v.unit,
						pro_price: v.budget,
						pro_content: v.remark
					})
				})
				let _data = {
					title: this.form.title,
					address: this.form.addressName,
					baotime: this.form.date,
					name: this.form.myName,
					phone: this.form.tel,
					protype: this.form.categoryId,
					// create_at,
					longitude: this.longitude,
					latitude: this.latitude,
					u_id: uni.getStorageSync('user').u_id,
					pro: JSON.stringify(_pro)
				}
				let _this = this;
				// console.log(_this.form.tel)
				let rule = [
					[
						() => !useTestTel(_this.form.tel),
						'请正确输入联系方式'
					],
					[
						() => {
							for (let key in _data) {
								if (!_data[key]) {
									return true
								}
							}
							return false
						},
						'基本信息不能为空'
					]
				];
				for (let i = 0; i < rule.length; i++) {
					console.log(rule[i][0]())
					if (rule[i][0]()) {
						uni.showToast({
							title: rule[i][1],
							duration: 2000,
							icon: 'error'
						});
						return
					}
				}
				// console.log(_data)
				addJicaiApi(_data).then(res => {
					if (res.data.msg == '成功') {
						fun && fun(res.data.j_id);
						uni.redirectTo({
							url: `/pages/collectinformation/collectinformation?type=2&id=${res.data.j_id}`
						});
					}
				}).catch(err => {
					console.log(err);
				})
			},
			getAddress() {
				uni.chooseLocation({
					success: (res) => {
						// console.log(res)
						this.latitude = res.latitude;
						this.longitude = res.longitude;
						this.form.addressName = res.name;
					},
					fail() {

					}
				})
			},
			calendarFun(e) {
				this.form.date = e.year + '-' + e.month + '-' + e.day;
			},
			// onShareAppMessage(res) {
			// 	console.log(res)

			// },
			demandDataAdd() {
				if (this.demandData.length < 5) {
					this.demandData.push({
						name: '',
						nameId: '',
						num: '',
						unit: '',
						budget: '',
						remark: ''
					})
				} else {
					this.$refs.toast.show({
						content: '最多可以发布5个需求信息',
						duration: 1500
					})
				}
			},
			categorySelectFun(e) {
				// console.log(e)
				let thsi = this;
				this.form.category = e[0].label;
				this.form.categoryId = e[0].value;
				this.demandData = [{
					name: '',
					nameId: '',
					num: '',
					unit: '',
					budget: '',
					remark: ''
				}];
				this.demandDataIndex = 0;
				this.selectData.forEach(v => {
					if (v.id == e[0].value) {
						v.child?.forEach(v2 => {
							thsi.nameSelectList.push({
								label: v2.name,
								value: v2.id
							})
						})
					}
				});

			},
			nameSelectFun(e) {
				this.demandData[this.demandDataIndex].name = e[0].label;
				this.demandData[this.demandDataIndex].nameId = e[0].value;
			},
			openNameSelectShow(i) {
				this.nameSelectShow = true;
				this.demandDataIndex = i;
			}
		},
		onLoad() {
			jicaiTypeApi().then(res => {
				if (res.data.msg == '成功') {
					let thsi = this;
					thsi.categorySelectList = [];
					res.data.data.forEach(v => {
						thsi.categorySelectList.push({
							label: v.name,
							value: v.id
						})
					});
					thsi.selectData = res.data.data;
				}
			}).catch(err => {
				console.log(err)
			});
			jicaiTzyjApi().then(res => {
				console.log(res)
				if (res.data.msg == '成功') {
					this.jicaiTzyjData = res.data.data;
				}
			}).catch(err => {
				console.log(err)
			})
		}
	}
</script>

<style lang="scss" scoped>
	.InitiateSolitaire {
		width: 750rpx;

		.initiateSolitaire {
			width: 100%;
			border: 1px solid #afafaf;
			background-color: #f7f7f7;
			border-radius: 20rpx;

			.text-label {
				width: 140rpx;
			}

			input {
				border: 1px solid #d3d3d3;
				padding: 0 10rpx;
				border-radius: 10rpx;
				height: 60rpx;
			}
		}

		.demandTable {
			width: 100%;
			border-radius: 20rpx;
			background-color: #ffffff;
			border: 1px solid #d8d8d8;
			height: 280rpx;
			overflow-y: scroll;
		}

		.demandTable::-webkit-scrollbar {
			display: none;
		}
	}
</style>
